import React from 'react';
import { Flex, Layout } from 'antd';
import { Toast, NavBar } from 'react-vant';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { ProductCard, Tag, Button } from 'react-vant';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: '待接单',
    children: [
      <ProductCard
      num="2"  price="2.00" desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />,
    <ProductCard
      num="2"  price="2.00" desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />,
    <br />,
    <p>aaa不吃香菜,请多放醋</p>,
    <br />,
    <ProductCard
      num="2"  price="2.00" desc="描述信息"
      title="商品名称"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    />,
    ],
  },
  {
    key: '2',
    label: ' 待出发',
    children: [
      
    ],
  },
  {
    key: '3',
    label: '待送达',
    children: [
      
    ],
  },
  {
    key: '4',
    label: '已完成',
    children: [
      
    ],
  },
  {
    key: '5',
    label: '取消/退款',
    children: [
      
    ],
  },
];

const { Header, Footer, Sider, Content } = Layout;

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#fff',
};

function App() {
  return (
    <div>
      <Layout style={{ width: '100vw', height: '100vh' }}>
        <NavBar
          title="订单"
          leftText="返回"
          // rightText="按钮"
          onClickLeft={() => Toast('返回')}
          // onClickRight={() => Toast('按钮')}
        />
        <Content style={contentStyle}>
           <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        </Content>
      </Layout>
    </div>
  );
}

export default App;
